<template>
	<div>
		<!-- 搜索表单 -->
		<yd-form ref="myForm" :options="formOptions" :model="formData" :btns="formBtns" @form-init="handleFormInited">
			<template #form-btn="props">
				<div>
					<el-button class="yd-form-btn" type="primary" @click="handleSearch(props.model)">查询</el-button>
				</div>
			</template>
		</yd-form>
		<!-- 列表 -->
		<yd-table
			:formData="formData"
			:tableConfig="tableConfig"
			:tableData="tableData"
			@sizeChangeHandler="handleSearch"
			@currentChangeHandler="handleSearch"
			@sortChangeHandler="handleSearch"
			@selectionChangeHandler="handleSelectionChange"
		></yd-table>
		<!-- 新增或修改弹出层 -->
		<el-dialog v-model="dialog.addOrEdit.open" :title="dialog.addOrEdit.title" width="600px" append-to-body center>
			<el-form ref="addOrEditForm" :model="dialog.addOrEdit.form" :rules="dialog.addOrEdit.rule" label-width="130px">
				<el-form-item label="订单编码" prop="orderCode">
					<el-input v-model="dialog.addOrEdit.form.orderCode" placeholder="请输入订单编码" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="子订单编码" prop="suborderCode">
					<el-input v-model="dialog.addOrEdit.form.suborderCode" placeholder="请输入子订单编码" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="子订单类型">
					<el-select v-model="dialog.addOrEdit.form.suborderType" filterable placeholder="请选择子订单类型" width="100%">
						<el-option v-for="(value, key, index) in options.suborderType" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="子订单状态">
					<el-select v-model="dialog.addOrEdit.form.suborderStatus" filterable placeholder="请选择子订单状态" width="100%">
						<el-option v-for="(value, key, index) in options.suborderStatus" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属能力" prop="abilityCode">
					<el-select v-model="dialog.addOrEdit.form.abilityCode" filterable @change="abilityChange" placeholder="请选择所属能力" width="100%">
						<el-option v-for="value in options.ability" :key="value.id" :label="value.label" :value="value.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="能力提供方机构名称" prop="providerInsName">
					<el-input v-model="dialog.addOrEdit.form.providerInsName" placeholder="请输入能力提供方机构名称" maxlength="100" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="能力提供方机构编码" prop="providerInsCode">
					<el-input v-model="dialog.addOrEdit.form.providerInsCode" placeholder="请输入能力提供方机构编码" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="所属服务" prop="serviceCode">
					<el-select v-model="dialog.addOrEdit.form.serviceCode" @change="serviceChange" filterable placeholder="请选择所属服务" width="100%">
						<el-option v-for="value in options.service" :key="value.value" :label="value.label" :value="value.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="订购部门名称" prop="departmentName">
					<el-input v-model="dialog.addOrEdit.form.departmentName" placeholder="请输入订购部门名称" maxlength="100" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="订购部门编码" prop="departmentCode">
					<el-input v-model="dialog.addOrEdit.form.departmentCode" placeholder="请输入订购部门编码" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="订购应用名称" prop="appName">
					<el-input v-model="dialog.addOrEdit.form.appName" placeholder="请输入订购应用名称" maxlength="100" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="订购应用编码" prop="appCode">
					<el-input v-model="dialog.addOrEdit.form.appCode" placeholder="请输入订购应用编码" maxlength="32" show-word-limit></el-input>
				</el-form-item>
				<el-form-item label="服务开通结果">
					<el-select v-model="dialog.addOrEdit.form.serviceGrantResult" filterable placeholder="请选择服务开通结果" width="100%">
						<el-option v-for="(value, key, index) in options.serviceGrantResult" :key="index" :label="value" :value="key"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" :loading="dialog.addOrEdit.btnLoading" @click="handleSubmit(beforeAdd, beforeAdd)">确 定</el-button>
				<el-button @click="dialog.addOrEdit.open = false">取 消</el-button>
			</template>
		</el-dialog>

		<!-- 导入弹出层 -->
		<el-dialog
			:key="dialog.imp.key"
			v-model="dialog.imp.open"
			:title="dialog.imp.title"
			width="500px"
			:close-on-click-modal="false"
			append-to-body
			center
			@closed="dialog.imp.key -= 1"
		>
			<div style="text-align: center">
				<el-upload
					:ref="dialog.imp.ref"
					:headers="dialog.imp.headers"
					action="/management/mp/purchase/internal/import"
					:data="{}"
					drag
					:auto-upload="false"
					accept=".xls,.xlsx"
					:limit="dialog.imp.limit"
					:before-upload="handleBeforeUpload"
					:on-progress="handleUploadOnProgress"
					:on-exceed="handleUploadOnExceed"
					:on-success="handleUploadOnSuccess"
					:on-error="handleUploadOnError"
				>
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				</el-upload>
			</div>
			<template #footer>
				<el-button :loading="dialog.imp.downloadTemplateBtnLoading" type="primary" @click="downloadTemplate('内部订购单导入模板')"
					>下载模板</el-button
				>
				<el-button :loading="dialog.imp.importSubmitBtnLoading" type="primary" @click="handleImport">确 定</el-button>
				<el-button @click="dialog.imp.open = false">取 消</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import Curd from '@/views/management/middle-platform/curd';
import { page, save, updateById, removeByIds, downloadInternalTemplate } from '@/api/middle-platform/conf-internal-purchase';
import {
	mpAbilityOptions,
	mpServiceOptions,
	suborderTypeOptions,
	suborderStatusOptions,
	serviceGrantResultOptions,
} from '@/views/management/middle-platform/select-option';

export default {
	name: 'ConfInternalPurchase',
	mixins: [Curd],
	data() {
		return {
			// 接口
			api: {
				query: page,
				add: save,
				edit: updateById,
				remove: removeByIds,
				downloadTemplate: downloadInternalTemplate,
			},
			// 下拉选项
			options: {
				// 能力
				ability: {},
				// 服务
				service: {},
				// 子订单类型
				suborderType: {},
				// 子订单状态
				suborderStatus: {},
				// 服务开通结果
				serviceGrantResult: {},
			},
			// 搜索表单
			formData: {
				...this.$route.query,
				pageSize: 10,
				pageNum: 1,
			},
			formOptions: [
				// {
				// 	type: 'select',
				// 	prop: 'serviceCode',
				// 	label: '所属服务',
				// 	isInitValue: false,
				// 	attrs: {
				// 		multiple: false,
				// 		clearable: true,
				// 	},
				// 	api: {
				// 		name: 'queryMpServiceOptions',
				// 	},
				// },
				// {
				// 	type: 'select',
				// 	prop: 'serviceGrantResult',
				// 	label: '服务开通结果',
				// 	isInitValue: false,
				// 	attrs: {
				// 		multiple: false,
				// 		clearable: true,
				// 	},
				// 	api: {
				// 		name: 'queryDictByType',
				// 		params: 'mp_service_grant_result',
				// 	},
				// },
				{
					type: 'input',
					prop: 'orderCode',
					label: '订单编码',
					placeholder: '输入订单编码模糊搜索',
					attrs: {
						clearable: true,
					},
				},
				{
					type: 'input',
					prop: 'suborderCode',
					label: '子订单编码',
					placeholder: '输入子订单编码模糊搜索',
					attrs: {
						clearable: true,
					},
				},
				{
					type: 'input',
					prop: 'abilityCode',
					label: '能力编码',
					placeholder: '输入能力编码模糊搜索',
					attrs: {
						clearable: true,
					},
				},
				{
					type: 'input',
					prop: 'abilityName',
					label: '能力名称',
					placeholder: '输入能力名称模糊搜索',
					attrs: {
						clearable: true,
					},
				},
				{
					type: 'input',
					prop: 'serviceCode',
					label: '服务编码',
					placeholder: '输入服务编码模糊搜索',
					attrs: {
						clearable: true,
					},
				},
				{
					type: 'input',
					prop: 'serviceName',
					label: '服务名称',
					placeholder: '输入服务名称模糊搜索',
					attrs: {
						clearable: true,
					},
				},
			],
			formBtns: [],
			tableConfig: {
				columns: [
					{
						label: '订单编码',
						prop: 'orderCode',
					},
					{
						label: '子订单编码',
						prop: 'suborderCode',
					},
					{
						label: '子订单类型',
						prop: 'suborderType',
						formatter: (row: any, val: any) => {
							return this.options.suborderType[val];
						},
					},
					{
						label: '子订单状态',
						prop: 'suborderStatus',
						formatter: (row: any, val: any) => {
							return this.options.suborderStatus[val];
						},
					},
					{
						label: '能力名称',
						prop: 'abilityName',
					},
					{
						label: '能力编码',
						prop: 'abilityCode',
					},
					{
						label: '能力提供方机构名称',
						prop: 'providerInsName',
					},
					{
						label: '能力提供方机构编码',
						prop: 'providerInsCode',
					},
					{
						label: '服务名称',
						prop: 'serviceName',
					},
					{
						label: '服务编码',
						prop: 'serviceCode',
					},
					{
						label: '订购部门名称',
						prop: 'departmentName',
					},
					{
						label: '订购部门编码',
						prop: 'departmentCode',
					},
					{
						label: '订购应用名称',
						prop: 'appName',
					},
					{
						label: '订购应用编码',
						prop: 'appCode',
					},
					{
						label: '服务开通结果',
						prop: 'serviceGrantResult',
						formatter: (row: any, val: any) => {
							return this.options.serviceGrantResult[val];
						},
					},
				],
				// 分页
				pagination: {
					pageNum: 1,
					total: 0,
				},
				// 加载层
				loading: false,
				// 启用复选框
				enableSelection: true,
				// 工具栏
				toolBar: [
					{ name: '新增', icon: 'yd-icon-plus', handler: () => this.handleAdd() },
					{ name: '修改', icon: 'yd-icon-edit', disable: 'single', handler: () => this.handleEdit() },
					{ name: '删除', icon: 'yd-icon-delete', disable: 'multiple', handler: () => this.handleDelete() },
					{ name: '导入', icon: 'yd-icon-import', handler: () => this.handleImport() },
				],
			},
			tableData: [],
		};
	},
	created() {
		// 所属能力
		mpAbilityOptions().then((data: any) => {
			// this.options.ability = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
			this.options.ability = data;
		});

		// 子订单类型
		suborderTypeOptions().then((data: any) => {
			this.options.suborderType = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 子订单状态
		suborderStatusOptions().then((data: any) => {
			this.options.suborderStatus = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 服务开通结果
		serviceGrantResultOptions().then((data: any) => {
			this.options.serviceGrantResult = data.reduce((obj: any, item: any) => ((obj[item.value] = item.label), obj), {});
		});
		// 设置校验规则
		this.dialog.addOrEdit.rule = {
			orderCode: [{ required: true, message: '订单编码不能为空', trigger: 'blur' }],
			suborderCode: [{ required: true, message: '子订单编码不能为空', trigger: 'blur' }],
			suborderType: [{ required: true, message: '子订单类型不能为空', trigger: 'change' }],
			suborderStatus: [{ required: true, message: '子订单状态不能为空', trigger: 'change' }],
			abilityCode: [{ required: true, message: '所属能力不能为空', trigger: 'change' }],
			providerInsName: [{ required: true, message: '能力提供方机构名称不能为空', trigger: 'blur' }],
			providerInsCode: [{ required: true, message: '能力提供方机构编码不能为空', trigger: 'blur' }],
			serviceCode: [{ required: true, message: '所属服务不能为空', trigger: 'change' }],
			departmentName: [{ required: true, message: '订购部门名称不能为空', trigger: 'blur' }],
			departmentCode: [{ required: true, message: '订购部门编码不能为空', trigger: 'blur' }],
			appName: [{ required: true, message: '订购应用名称不能为空', trigger: 'blur' }],
			appCode: [{ required: true, message: '订购应用编码不能为空', trigger: 'blur' }],
			serviceGrantResult: [{ required: true, message: '服务开通结果不能为空', trigger: 'change' }],
		};
	},
	methods: {
		beforeAdd() {
			// this.dialog.addOrEdit.form.abilityName = this.options.ability[this.dialog.addOrEdit.form.abilityCode];
			// this.dialog.addOrEdit.form.serviceName = this.options.service[this.dialog.addOrEdit.form.serviceCode];
		},
		abilityChange(val: string) {
			this.dialog.addOrEdit.form.serviceCode = '';
			let res = this.options.ability.filter((item: any) => item.value === val);
			this.dialog.addOrEdit.form.abilityName = res && res[0].label;
			// 所属服务
			mpServiceOptions(res && res[0].id).then((data: any) => {
				this.options.service = data;
			});
		},
		serviceChange(val: string) {
			let res = this.options.service.filter((item: any) => item.value === val);
			this.dialog.addOrEdit.form.serviceName = res && res[0].label;
		},
	},
};
</script>

<style scoped></style>
